<template>
  <div class="dashboard">
    <div class="stats-row">
      <div class="stat-card">
        <h3>CPU使用占比</h3>
        <div ref="cpuChart" class="chart-container"></div>
      </div>
      <div class="stat-card">
        <h3>内存使用占比</h3>
        <div ref="memoryChart" class="chart-container"></div>
      </div>
      <div class="stat-card">
        <h3>GPU使用占比</h3>
        <div ref="gpuChart" class="chart-container"></div>
      </div>
      <div class="stat-card">
        <h3>任务状态</h3>
        <div ref="taskChart" class="chart-container"></div>
      </div>
    </div>
    <WorkerNodeList />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import WorkerNodeList from '../components/schedule/WorkerNodeList.vue'

export default {
  components: { WorkerNodeList },
  setup() {
    const cpuChart = ref(null)
    const memoryChart = ref(null)
    const gpuChart = ref(null)
    const taskChart = ref(null)

    const initCharts = () => {
      // CPU 使用占比饼图
      const cpuInstance = echarts.init(cpuChart.value)
      cpuInstance.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: 'CPU使用率',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 65, name: '已使用' },
            { value: 35, name: '未使用' }
          ],
          color: ['#42b983', '#eee']
        }]
      })

      // 内存使用占比饼图
      const memoryInstance = echarts.init(memoryChart.value)
      memoryInstance.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '内存使用率',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 45, name: '已使用' },
            { value: 55, name: '未使用' }
          ],
          color: ['#1890ff', '#eee']
        }]
      })

      // GPU 使用占比饼图
      const gpuInstance = echarts.init(gpuChart.value)
      gpuInstance.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: 'GPU使用率',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 30, name: '已使用' },
            { value: 70, name: '未使用' }
          ],
          color: ['#722ed1', '#eee']
        }]
      })

      // 任务状态饼图
      const taskInstance = echarts.init(taskChart.value)
      taskInstance.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '任务状态',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 75, name: '进行中' },
            { value: 25, name: '排队中' }
          ],
          color: ['#faad14', '#eee']
        }]
      })

      // 响应式调整
      const handleResize = () => {
        cpuInstance.resize()
        memoryInstance.resize()
        gpuInstance.resize()
        taskInstance.resize()
      }

      window.addEventListener('resize', handleResize)

      // 组件卸载时移除监听器
      return () => {
        window.removeEventListener('resize', handleResize)
      }
    }

    onMounted(() => {
      initCharts()
    })

    return {
      cpuChart,
      memoryChart,
      gpuChart,
      taskChart
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 16px;
  text-align: center;
}

.chart-container {
  width: 100%;
  height: 200px;
}

@media (max-width: 1200px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}
</style>